<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="<s:url value="/assets/web/css/base.css"></s:url>">
    <link rel="stylesheet" href="<s:url value="/assets/web/css/header.css"></s:url>">
    <link rel="stylesheet" href="<s:url value="/assets/web/css/login/bootstrap.min.css?v=3.3.6"></s:url>">
    <!-- 基本框css -->
    <link rel="stylesheet" href="<s:url value="/assets/web/css/base_nav.css"></s:url>">
    <!-- checkbox 复选框 -->
    <link rel="stylesheet" href="<s:url value="/assets/web/common/lulu_zujian/ui.css"></s:url>"/>

    <!-- 创建项目css -->
    <link rel="stylesheet" href="<s:url value="/assets/web/css/createProject/createProject.css"></s:url>"/>
    <title>创建项目</title>
    <style>
        <%--头部图片居中--%>
        img {
            vertical-align: middle;
        }

        /*菜单修改*/
        .nav-left {
            top: 66px;
        }

        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }

        select {
            display: inline-block;
            height: 40px;
            margin: 0;
            border: 1px solid #d0d0d5;
            border-right-width: 27px;
            opacity: 1;
            filter: none;
            vertical-align: middle;
        }

        .content li label {
            vertical-align: top;
        }

        .maleft {
            margin-left: 55px
        }

        .maleft1 {
            margin-left: -45px
        }
        .get_map_address{
            width: 100px;
            height:30px;
            line-height: 30px;
            text-align: center;
            background-color: #0d43fa;
            border-radius: 5px;
            color: white;
            display: inline-block;
            position: absolute;
            left: 500px;
            cursor: pointer;
        }
        .address_info{
            display: none;
            width: 280px;
            height:30px;
            line-height: 30px;
            text-align: center;
            /*border: 1px solid #0d43fa;*/
            border-radius: 5px;
            color: #38424a;
            display: inline-block;
            position: absolute;
            left: 620px;
            cursor: pointer;
        }
        .gdmap{
            display: none;
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99999999;
        }

        .title {
            width: 100%;
            height: 80px;
            line-height: 80px;
            font-size: 30px;
            text-shadow: 1px 1px 1px mintcream;
            text-align: center;
            color: white;
        }

        #container {
            width: 80%;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .response {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: dodgerblue;
            color: white;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>

<body class="bgcolor">
<%@ include file="/WEB-INF/views/modules/commons/nav.jsp" %>
<%@ include file="/WEB-INF/views/modules/commons/menu.jsp" %>
<table></table>
<div class="container">
    <div class="nav" style="margin-top:70px; font-size: 22px;">
        * 新建项目
    </div>
    <div class="content">
        <form action="<s:url value="/onwnerUnit/addProject"></s:url>" id="form1" method="post">
            <div class="nav" style="margin-top:16px; margin-left: -25px; font-size: 22px; padding: 0 96px;">
                | 基本信息
            </div>
            <div style="width: 1200px;">
                <div class="form-group clearfix maleft" style="margin-top:20px;">
                    <label class="col-sm-2 control-label no-padding-right" for="natureType">项目类型</label>
                    <div class="col-sm-3 maleft1">
                        <select name="natureType" id="natureType" class="form-control ">
                            <option value="">--项目性质类型--</option>
                            <option value="3">政府投资房建市政类</option>
                            <option value="4">政府投资交通水利类</option>
                            <option value="1">企业投资类</option>
                            <option value="2">土地收储类</option>
                        </select>
                    </div>
                    <div class="col-sm-1">
                    </div>
                    <label class="col-sm-2 control-label no-padding-right" for="name">项目名称</label>
                    <div class="col-sm-3 maleft1">
                        <input type="text" name="name" placeholder="项目名称" id="name" class="form-control"
                               autocomplete="off" required>
                    </div>
                </div>
                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="money">项目投资金额</label>
                    <div class="col-sm-3 maleft1">
                        <input type="number" name="money" placeholder="投资金额（万元）" id="money" class="form-control "
                               autocomplete="off" required>
                    </div>


                </div>
                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="esDept">项目责任单位</label>
                    <div class="col-sm-3 maleft1">
                        <input type="text" id="esDept" name="resDept" placeholder="项目责任单位" class="form-control"
                               autocomplete="off" required>
                    </div>
                    <div class="col-sm-1">
                    </div>
                    <label class="col-sm-2 control-label no-padding-right" for="fenguan">项目分管领导</label>
                    <div class="col-sm-3 maleft1">
                        <input id="fenguan" type="text" name="resUser" placeholder="分管领导" class="form-control"
                               autocomplete="off" required>
                    </div>
                </div>
                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="contactName">项目经办人</label>
                    <div class="col-sm-3 maleft1">
                        <input type="text" id="contactName" name="contactName" placeholder="联系人" value="${user.name}"
                               autocomplete="off" readonly="readonly" class="form-control">
                    </div>
                    <div class="col-sm-1">
                    </div>
                    <label class="col-sm-2 control-label no-padding-right" for="contactPhone"> 经办人电话</label>
                    <div class="col-sm-3 maleft1">
                        <input type="text" id="contactPhone" name="contactPhone" placeholder="联系电话"
                               autocomplete="off" value="${user.phone}" readonly="readonly" class="form-control">
                    </div>
                </div>
                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="ownerUnitPerson">项目责任人</label>
                    <div class="col-sm-3 maleft1">
                        <input type="text" id="ownerUnitPerson" name="ownerUnitPerson" placeholder="业主单位责任人"
                               class="form-control" autocomplete="off"
                               required>
                    </div>
                    <div class="col-sm-1">
                    </div>
                    <label class="col-sm-2 control-label no-padding-right" for="ownerUnitPersonPhone">责任人电话</label>
                    <div class="col-sm-3 maleft1">
                        <input type="number" id="ownerUnitPersonPhone" name="ownerUnitPersonPhone"
                               placeholder="业主单位责任人电话"
                               class="form-control" autocomplete="off" required>
                    </div>
                </div>
                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="occupyDept">征迁实施单位</label>
                    <div class="col-sm-3 maleft1">
                        <input id="occupyDept" type="text" name="occupyDept" placeholder="征迁实施单位" class="form-control"
                               autocomplete="off" required>
                    </div>
                </div>
                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="occupyOperateUser">征迁单位经办人</label>
                    <div class="col-sm-3 maleft1">
                        <input id="occupyOperateUser" type="text" name="occupyOperateUser" placeholder="征迁单位经办人"
                               class="form-control" autocomplete="off"
                               required>
                    </div>
                    <div class="col-sm-1">
                    </div>
                    <label class="col-sm-2 control-label no-padding-right"
                           for="occupyOperateUserPhone">征迁单位经办人电话</label>
                    <div class="col-sm-3 maleft1">
                        <input type="number" id="occupyOperateUserPhone" name="occupyOperateUserPhone"
                               placeholder="征迁单位经办人电话"
                               class="form-control" autocomplete="off"
                               required>
                    </div>
                </div>
                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="occupyResUser">征迁单位责任人</label>
                    <div class="col-sm-3 maleft1">
                        <input id="occupyResUser" type="text" name="occupyResUser" placeholder="征迁单位责任人"
                               class="form-control" autocomplete="off"
                               required>
                    </div>
                    <div class="col-sm-1">
                    </div>
                    <label class="col-sm-2 control-label no-padding-right" for="occupyResUserPhone">征迁单位责任人电话</label>
                    <div class="col-sm-3 maleft1">
                        <input type="number" id="occupyResUserPhone" name="occupyResUserPhone"
                               placeholder="征迁单位责任人电话"
                               class="form-control" autocomplete="off"
                               required>
                    </div>
                </div>

                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="advise">项目描述</label>
                    <div class="col-sm-10 maleft1" style="width: 77.666667%;">
            <textarea class="form-control" name="describes" id="advise" cols="71" rows="4" required style="margin:0;"
                      placeholder="项目描述（必填：投资主体、投资规模、初步选址、占地面积、建筑面积、建筑层高、建设内容等），点击输入内容"></textarea>
                    </div>

                </div>

                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="address">项目实施地址</label>
                    <div class="col-sm-3 maleft1">
                        <input  type="text" name="address" id="address" placeholder="实施地址" class="form-control "
                               autocomplete="off" required>
                    </div>
                    <div class="get_map_address">选择地址</div>
                    <div class="address_info"></div>
                </div>


                <div class="form-group clearfix maleft">
                    <label class="col-sm-2 control-label no-padding-right" for="address">项目地址经纬度</label>
                    <div class="col-sm-3 maleft1">
                        <input  type="text" name="positions" id="positions-project" placeholder="实施地址" class="form-control "
                                autocomplete="off" style="display: none" >
                    </div>

                </div>
            </div>
            <%-- <div class="created-project">
                 <p>
                     项目类型:<select name="natureType" id="">
                     <option value="">--项目性质类型--</option>
                     <option value="3">政府投资住建市政类</option>
                     <option value="4">政府投资交通水利类</option>
                     <option value="1">企业投资类</option>
                     <option value="2">土地收储类</option>
                 </select>
                     项目名称:<input type="text" name="name" placeholder="项目名称" id="name" required>
                     投资金额:<input type="number" name="money" placeholder="投入金额（万元）" required>
                 </p>
                 <p>
                     责任人:<input type="text" name="ownerUnitPerson" placeholder="业主单位责任人" required>
                     责任人电话:<input type="number" name="ownerUnitPersonPhone" placeholder="业主单位责任人电话" required>
                     责任单位:<input type="text" name="resDept" placeholder="业主单位责任单位" required>

                 </p>
                 <p>
                     经办人:<input type="text" name="contactName" placeholder="联系人" value="${user.name}" readonly="readonly"  >
                     经办人电话:<input type="text" name="contactPhone" placeholder="联系电话" value="${user.phone}" readonly="readonly"  >
                     分管领导:<input id ="fenguan" type="text" name="resUser" placeholder="分管领导" required>
                 </p>
                 <p>
                     征迁实施单位:<input id ="occupyDept" type="text" name="occupyDept" placeholder="征迁实施单位" required>
                     征迁责任人:<input id ="occupyResUser" type="text" name="occupyResUser" placeholder="征迁责任人" required>
                     征迁经办人:<input id ="occupyOperateUser" type="text" name="occupyOperateUser" placeholder="征迁经办人" required>
                 </p>
                 <p>项目描述:<textarea name="describes" id="advise" cols="71" rows="4"
                                   placeholder="项目描述（必填：投资主体、投资规模、初步选址、占地面积、建筑面积、建筑层高、建设内容等），点击输入内容" required></textarea>
                 </p>
                 <p>
                     <!-- <input type="text" placeholder="投资主体" required> -->
                     实施地址:<input type="text" name="address" placeholder="实施地址" required>
                 </p>

             </div>--%>

            <!-- 行业分类 -->
            <div class="classify-industry">
                <div class="nav" style="margin-top:16px; margin-left: -25px; font-size: 22px;">
                    || 请选择分类
                </div>
                <%--<div class="nav">--%>
                <%--请选择分类--%>
                <%--</div>--%>
                <div class="content">
                    <p class="title">
                        <em>●</em>&nbsp;&nbsp;&nbsp;行业分类</p>
                    <ul>
                        <c:forEach items="${industryTypelist}" var="industryTypelist">
                            <li>
                                <input type="radio" id="${industryTypelist.typeCode}" name="industryType"
                                       value="${industryTypelist.typeCode}" required>
                                <label for="${industryTypelist.typeCode}" class="ui-radio"></label>
                                <label for="${industryTypelist.typeCode}"
                                       class="project-name">${industryTypelist.typeName}</label>
                            </li>
                        </c:forEach>
                    </ul>

                </div>
            </div>
            <!-- 进度分类 -->
            <div class="classify-speed">
                <div class="content">
                    <p class="title">
                        <em>●</em>&nbsp;&nbsp;&nbsp;进度分类</p>
                    <ul>
                        <c:forEach items="${scheduleTypelist}" var="scheduleTypelist">
                            <li>
                                <input type="radio" id="${scheduleTypelist.typeCode}" name="schedCode"
                                       value="${scheduleTypelist.typeCode}" required>
                                <label for="${scheduleTypelist.typeCode}" class="ui-radio"></label>
                                <label for="${scheduleTypelist.typeCode}"
                                       class="project-name">${scheduleTypelist.typeName}</label>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
            <!--项目分类 -->
            <div class="classify-project">
                <div class="content">
                    <p class="title">
                        <em>●</em>&nbsp;&nbsp;&nbsp;项目分类</p>
                    <ul>
                        <c:forEach items="${itemTypelist}" var="itemTypelist">
                            <li>
                                <input type="radio" id="${itemTypelist.typeCode}" name="projectType"
                                       value="${itemTypelist.typeCode}" required>
                                <label for="${itemTypelist.typeCode}" class="ui-radio"></label>
                                <label for="${itemTypelist.typeCode}"
                                       class="project-name">${itemTypelist.typeName}</label>
                            </li>
                        </c:forEach>
                    </ul>
                    <div class="left-container" m style="display: none;">
                        <h6 class="title">项目模版</h6>
                        <div class="moban">标准模板</div>
                        <div class="content">
                            <div class="modules">
                                <img src="<s:url value="/assets/web/img/createproject/create4.png"></s:url>">
                                <p>默认</p>
                            </div>
                            <div class="modules">
                                <img src="<s:url value="/assets/web/img/createproject/create1.png"></s:url>">
                                <p>政府投资项目</p>
                            </div>
                        </div>
                        <div class="content">
                            <div class="modules">
                                <img src="<s:url value="/assets/web/img/createproject/create2.png"></s:url>">
                                <p>企业投资项目</p>
                            </div>
                            <div class="modules">
                                <img src="<s:url value="/assets/web/img/createproject/create3.png"></s:url>">
                                <p>土地收储项目</p>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="submit" class="project-submit">提交部门配置节点</button>
            </div>
        </form>
    </div>

</div>
<div class="footer">
</div>
<div class="gdmap">
    <div class="title">项目实施地址</div>
    <div id="container"></div>
    <div class="response">确认地址</div>
</div>
<script src="<s:url value="/assets/web/js/jquery.min.js"></s:url>"></script>
<script src="<s:url value="/assets/web/js/bootstrap.min.js"></s:url>"></script>
<script src="/assets/web/common/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>
<!-- checkbox -->
<script src="<s:url value="/assets/web/common/lulu_zujian/sea.js"></s:url>"></script>
<script>
    $(document).ready(function () {
        $("#fenguan").blur(function () {
            var v = $("#fenguan").val();
            $.ajax({
                type: "GET",
                url: "/onwnerUnit/verifyLeaderExist",
                dataType: "json",
                data: {leaderName: v},
                success: function (model) {
                    if (!model.exist) {
                        alert("系统没有该分管领导");
                        $("#fenguan").val("");
                    }
                },
                error: function (model) {
                }
            });
        })
    })


</script>


<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=7e01035946b3e7a3238c8662f4ad4f5d">
</script>


<script>
    var get_map_address = document.querySelector(".get_map_address");
    var gdmap = document.querySelector(".gdmap");
    get_map_address.onclick = function(){
        gdmap.style.display = "block"
    }

    // 地图
    var map = new AMap.Map('container', {
        // mapStyle: "amap://styles/a09002f953512d69cce0f055430d0216",
        resizeEnable: true,
        zoom: 11,//级别
        center: [118.932592,25.866695],//中心点坐标
        viewMode: '3D',//使用3D视图
        layers: [
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ]
    });
    // 标记点图标
    var icon = new AMap.Icon({
        size: new AMap.Size(40, 50),    // 图标尺寸
        image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',  // Icon的图像
        imageSize: new AMap.Size(20, 30)   // 根据所设置的大小拉伸或压缩图片
    });
    // 标记点初始化
    var marker = new AMap.Marker({
        icon: icon,
    })
    // 点击地图获取标记点
    // 经纬度
    var reaponse_lng;
    var reaponse_lat;
    map.on('click', function (e) {
        console.log(e)
        reaponse_lng = e.lnglat.lng
        reaponse_lat = e.lnglat.lat
        map.remove([marker])
        marker = new AMap.Marker({
            icon: icon,
            position: [e.lnglat.lng, e.lnglat.lat],
            imageSize: new AMap.Size(10, 10)
        });
        map.add([marker]);
    })
    // 控件
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], function () {
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        map.addControl(new AMap.MapType());
        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(new AMap.Geolocation());
        // map.addControl(new AMap.OverView({isOpen:true}));
    })

    var response = document.querySelector(".response")
    var address_info = document.querySelector(".address_info")
    response.onclick = function () {
        var send = confirm("您选择的地址为:经度" + reaponse_lng + ",纬度" + reaponse_lat);
        if (send == true) {
            x = "您按了确认！";
            gdmap.style.display = "none"
            address_info.style.display = "block"
            address_info.innerHTML = "经度" + reaponse_lng + ",纬度" + reaponse_lat
            // 进行发送的数据!!!!!!
            var positions = [reaponse_lng,reaponse_lat]
            // $.ajax()
            $("#positions-project").val(positions);

        } else {
            x = "您按了取消！";
            // 取消即重新选择
        }
    }
</script>
</body>

</html>